<template>
  <div class="list">
    <div class="backgroundBule"></div>
    <div class="search">
      <input
        class="input"
        type="text"
        placeholder="搜索会员手机号"
        placeholder-style="color:#fff"
        v-model="phone"
        maxlength="11"
      />
      <icon
        @click="searchClick"
        class="searchClick"
        type="search"
        size="20"
        color="#fff"
      />
    </div>
    <scroll-view
      class="scroll-wrap no-scroll-bar"
      scroll-y
      style="height:calc(100% - 42px - 36px)"
      @scrolltolower="handleLoadMore"
    >
      <div
        class="shopsList"
        v-for="(item,index) in list"
        :key="index"
        @click="shopInfo(item.customerId)"
      >
        <div class="left">
          <span>{{!item.realName ? '暂无' : item.realName}}</span>
          <span
            style="margin-top:10px;color:#666"
          >{{item.mobile ? item.mobile : '暂无'}}</span>
        </div>
        <div class="imgHide">
          <img :src="item.avatar" alt />
        </div>
        <div class="right">
          <span
            :class="item.state === '0' ? 'spanYes' : item.state === '1' ? 'spanNo' : 'spanNo'"
          >{{item.state === '0' ? '正常' : item.state === '1' ? '冻结' : '禁用'}}</span>
          <span style="margin-top:10px;color:#666">{{item.createDate}}</span>
        </div>
      </div>
      <div v-if="alreadyLastPage" class="listHiti">没有更多了</div>
    </scroll-view>
  </div>
</template>

<script>
import { FIND_CUSTOMER_PAGE_API } from '@/api'

export default {
  components: {},

  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      arrpages: 0,
      list: [],
      alreadyLastPage: false,
      phone: ''
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    lists () {
      return this.list.map(_ => _)
    }
  },
  onShow () {
    this.list = []
    this.pageNo = 1
    this.alreadyLastPage = false
    // if (!this.alreadyLastPage) {
    this._getVipAdminData()
    // }
  },
  methods: {
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.moreFunction()
      }
    },
    shopInfo (value) {
      this.$router.push(
        '/pages/shop-management/vip-admin-info/main?customerId=' + value
      )
    },
    _getVipAdminData () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        phone: vm.phone
      }
      FIND_CUSTOMER_PAGE_API(params, vm.pageNo, vm.pageSize)
        .then(r => {
          if (r.data.code === '0') {
            vm.arrpages = r.data.data.pages
            if (r.data.data.total === 0) {
              vm.alreadyLastPage = true
              vm.list = []
            } else {
              vm.alreadyLastPage = false
              let { list } = r.data.data
              // vm.list.push(r.data.data.list)
              list.forEach(_ => {
                _.mobile =
                  _.mobile.match(/^\d{3}/)[0] +
                  '****' +
                  _.mobile.match(/\d{4}$/)[0]
                vm.list.push({ ..._ })
              })
            }
            // let { list, isFirstPage, isLastPage } = r.data.data
            // vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 请求列表
    moreFunction () {
      if (this.pageNo <= this.arrpages) {
        this.pageNo += 1
        this._getVipAdminData()
      } else {
        this.alreadyLastPage = true
      }
    },
    // printList (list, isFirst, isLast) {
    //   if (isFirst) {
    //     this.list = list
    //     if (isLast || !list.length) {
    //       // only one page
    //       this.alreadyLastPage = true
    //     } else {
    //       // has next page
    //       this.alreadyLastPage = false
    //       this.currentPage += 1
    //     }
    //   } else if (isLast) {
    //     // more than one page and this is the last page
    //     this.list.push(...list)
    //     this.alreadyLastPage = true
    //   } else {
    //     // middle page
    //     this.list.push(...list)
    //     this.alreadyLastPage = false
    //     this.currentPage += 1
    //   }
    // }
    searchClick () {
      this.list = []
      this.pageNo = 1
      this.alreadyLastPage = false
      this._getVipAdminData()
    }
  }
}
</script>

<style lang="scss">
.list {
  position: relative;
  .backgroundBule {
    width: 100%;
    height: 130px;
    background: #5e6dfb;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    position: relative;
    .input {
      width: 70%;
      height: 30px;
      padding-left: 10px;
      font-size: 14px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 25px;
    }
    .searchClick {
      position: absolute;
      right: 60px;
      z-index: 5;
    }
  }
  > .scroll-wrap {
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding: 0 15px;
    // background: #fefeff;
    .shopsList {
      width: 100%;
      margin: 25px auto 0;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      background: #fff;
      box-shadow: 0 0 16rpx #5e6dfb;
      font-size: 13px;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 90px;
        height: 73px;
      }
      .imgHide {
        padding: 10px 0;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .right {
        width: 150px;
        height: 73px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .spanNo {
          font-size: 14px;
          color: #a2a2a2;
        }
        .spanYes {
          font-size: 14px;
          color: #459a38;
        }
      }
    }
    .listHiti {
      width: 100%;
      height: 50px;
      font-size: 14px;
      color: #666;
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>
